<template>
  <div class="tree">
    <!-- 搜索框 -->
    <SearchBox />
    <a-tree
      class="a_tree"
      v-model="checkedKeys"
      checkable
      :tree-data="treeData"
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :selected-keys="selectedKeys"
      :defaultExpandAll="true"
      @expand="onExpand"
    >
      <template slot="custom" slot-scope="item">
        <div class="tree_box">
          <span class="node-title">{{ item.title }} </span>
          <span style="margin-left: 20px">
            <span style="margin-right: 10px">
              <!-- <a-icon type="delete" /> -->
              <img class="del" @click="toDel(item.key)" src="@/assets/3d_icon/del.png" alt="" />
            </span>
          </span>
        </div>
      </template>
    </a-tree>
  </div>
</template>
<script>
const treeData = [
  {
    title: "保时捷",
    key: "0",
    scopedSlots: { title: "custom" },
    children: [
      {
        title: "Light",
        key: "0-0",
        scopedSlots: { title: "custom" },
      },
      {
        title: "Camera",
        key: "0-1",
        scopedSlots: { title: "custom" },
        children: [
          {
            title: "Body",
            key: "0-1-0",
            scopedSlots: { title: "custom" },
          },
        ],
      },
    ],
  },
  {
    title: "保时捷",
    key: "1",
    scopedSlots: { title: "custom" },
    children: [
      {
        title: "Light",
        key: "1-1",
        scopedSlots: { title: "custom" },
      },
      {
        title: "Camera",
        key: "1-2",
        scopedSlots: { title: "custom" },
        children: [
          {
            title: "Body",
            key: "0-1-0",
            scopedSlots: { title: "custom" },
          },
        ],
      },
    ],
  },
  {
    title: "保时捷",
    key: "2",
    scopedSlots: { title: "custom" },
    children: [
      {
        title: "Light",
        key: "2-1",
        scopedSlots: { title: "custom" },
      },
    ],
  },
];
import SearchBox from "./comm/searchBox.vue";
export default {
  components: {
    SearchBox,
  },
  data() {
    return {
      expandedKeys: ["1", "1-1",'1-2'],
      autoExpandParent: true,
      checkedKeys: ["1", "1-1",'1-2'],
      selectedKeys: [],
      treeData,
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    },
  },
  methods: {
    // 删除节点
    toDel(e){
      console.log("e===",e);
    },

    // 展开/收起节点时触发
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ant-tree-icon-hide>li{
  position: relative;
}
::v-deep .ant-tree-treenode-switcher-open{
  position: relative;
  padding: 10px 0;
}
::v-deep .ant-tree-treenode-switcher-close{
  position: relative;
}
.a_tree {
  height: 76vh;
  overflow-y: scroll;
  width: 100%;
  padding-left: 5px;
  text-align: left;
  box-sizing: border-box;
  img {
    position: absolute;
    top: 10px;
    right: 23px;
    width: 18px;
    height: 18px;
  }
}
::v-deep .ant-tree-title {
  span {
    color: #fff;
  }
}
::v-deep .ant-tree-switcher_open .ant-tree-switcher-icon,
::v-deep .ant-tree-switcher_close .ant-tree-switcher-icon {
  color: #fff;
  font-size: 23px !important;
}
::v-deep .ant-tree-node-content-wrapper:hover{
  background-color: transparent !important;
}
// ::v-deep .ant-tree-treenode-switcher-close:hover {
//   background: linear-gradient(-90deg, rgba(80,152,255,0.21) 0%, #77AFFF 100%);
// }
</style>
